
import PropTypes, { func } from 'prop-types'
import { useState } from 'react';
import './style.scss'

function Button(props) {
    let { children, type, onClick } = props;

    return (
        <div className='ml-button'>
            <span className={type} onClick={onClick}>{children}</span>
        </div>
    )
}

Button.protoTypes = {
    children: PropTypes.node,
    type: PropTypes.oneOf(["primary", "danger", 'default', 'info']),
    onClick: PropTypes.func,

}

Button.defaultProps = {
    children: "按钮",
    type: 'default',
    onClick: () => { }
}

function ModalHeader(props) {
    let { title, onCancel, onoff } = props;
    return (
        <div>
            <div>{title}</div>
            <div onClick={onCancel}>{onoff && "X"}</div>
        </div>
    )
}

function ModalFooter(props) {
    let { type, onCancel, onOk, footer } = props;
    // 渲染函数
    let reanderFooter = () => {
        let btns = [];
        switch (type) {
            case "confirm":
                btns = [
                    <Button type='primary' key='1' onClick={onOk}>确定</Button>,
                    <Button key='2' onClick={onCancel}>取消</Button>
                ]
                break;
            case "danger":
                btns = [
                    <Button type='danger' key='1' onClick={onOk}>删除</Button>,
                    <Button key='2' onClick={onCancel}>取消</Button>
                ]
                break;
            case "info":
                btns = [
                    <Button type='info' key='1' onClick={onCancel}>我知道了</Button>
                ]
                break;
        }
        return btns;
    }
    return (
        footer ? footer() : reanderFooter()
    )
}

function Modal(props) {
    let { children, visiable, onCancel, width } = props;
    let reanderFooter = () => {
        let btns = [];
        switch (type) {
            case "confirm":
                btns = [
                    <Button type='primary' key='1' onClick={onOk}>确定</Button>,
                    <Button key='2' onClick={onCancel} >取消</Button>
                ]
                break;
            case "danger":
                btns = [
                    <Button type='danger' key='1' >删除</Button>,
                    <Button key='2' onClick={onCancel}>取消</Button>
                ]
                break;
            case "info":
                btns = [
                    <Button type='info' key='1' onClick={onCancel}>我知道了</Button>
                ]
                break;
        }
        return btns;
    }

    let headerShadow = e => {
        if (e.target.dataset.self) {
            onCancel()
        }
    }

    return (
        <div
            className='ml-layer'
            style={{ display: visiable ? "block" : "none" }}
            data-self="shadow"
            onClick={headerShadow}
        >

            <div className='ml-modal' style={{ width: `${width}px`, marginLeft: `-${width / 2}px` }}>
                <header>
                    <ModalHeader {...props}></ModalHeader>
                </header>
                <main>{children}</main>
                <footer>
                    <ModalFooter {...props}></ModalFooter>
                </footer>
            </div>
        </div >
    )
}

Modal.protoType = {
    title: PropTypes.node,
    onffo: PropTypes.bool,
    children: PropTypes.node,
    type: PropTypes.oneOf(["danger", "confirm", "info"]),
    visiable: PropTypes.bool,
    onCancel: PropTypes.func,
    footer: PropTypes.func,
    width: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.string
    ])
}

Modal.defaultProps = {
    title: "你好呀",
    onffo: 'true',
    children: <div>你也好</div>,
    type: "info",
    visiable: false,
    onCancel: () => { },
    footer: () => { },
    width: 520

}

function PageA() {
    let [visiable, setVisiable] = useState(true)
    let submit = () => {
        setTimeout(() => {
            console.log("发送ajax请求了...");
            setVisiable(false)
        }, 200)
    }
    return (
        <div>
            <button onClick={() => setVisiable(true)}>open modal</button>
            <Modal
                title={<span style={{ color: "red" }}>删除用户</span>}
                onoff
                type="confirm"
                visiable={visiable}
                onCancel={() => setVisiable(false)}
                onOk={submit}
                width={500}
                footer={
                    () => {
                        return [
                            <Button type='danger' key="1" onClick={() => setVisiable(false)}>残忍离开</Button>,
                            <Button type='primary' key="2" onClick={submit}>确定</Button>
                        ]
                    }
                }
            >
                <div>
                    <input type="text" />
                    <div>你确定要添加此用户吗？</div>
                </div>
            </Modal>
        </div>
    )
}

export default PageA